<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="./plugins/bootstrap/css/bootstrap.css">
  <link rel="stylesheet" href="./css/main.css">
  <style>
    .data-info dl{
      width:50%;
      float:left;
      margin-bottom:20px;
      overflow:hidden;
    }
    .data-info dl dt {
      float:left;
      color:#999;
      font-weight: normal;
    }
    .data-info dl dd {
      float:left;
    }
  </style>
</head>

<body>
  <div class="content">
    <div class="row">
      <div class="col">
        <div class="box">
          <div class="box-header">
            <div class="header-title">投资评级</div>
          </div>
          <div class="box-body">
            <div class="chart" id="barChart" style="height:120px;"></div>
            <div class="data-info clearfix">
              <dl>
                <dt>一致评级：</dt>
                <dd>增持(2.00)</dd>
              </dl>
              <dl>
                <dt>一月前：</dt>
                <dd>增持(1.70)</dd>
              </dl>
              <dl>
                <dt>一致目标价：</dt>
                <dd>4.87</dd>
              </dl>
              <dl>
                <dt>上涨空间：</dt>
                <dd>1.56%</dd>
              </dl>
            </div>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="box">
          <div class="box-header">
            <div class="header-title">投资评级</div>
          </div>
          <div class="box-body">
            
          </div>
        </div>
      </div>
      <div class="col"></div>
    </div>
    
  </div>
  <script src="./plugins/jquery/jquery.min.js"></script>
  <script src="js/echarts.js"></script>
  <script>
    $(function () {
      var myChart = echarts.init(document.getElementById('barChart'))
      var colorList = ["#44962a", '#5eb034', '#8bc53d', '#b6de47', '#FBB969', '#e78031', '#F36154', '#e93224']
      var barData = [
        [25],[25],[25],[25],[25],[25],[25],[25] // 固定值
      ]
      var data = {
        newData:130,
        lastData:160
      }
      var series = []
      $.each(barData,function(index, item) {
        series.push({
          type: 'bar',
          name: index,
          stack: '2',
          legendHoverLink: false,
          barWidth: 14,
          itemStyle: {
            normal: {
              color: colorList[index],
            },
          },
          label: {
            show: false,
          },
          data: item
        })
      })
      series.push({
            zlevel: 20,
            type: 'scatter',
            symbol: 'pin',
            symbolSize: 50,
            label: {
                normal: {
                    show: true,
                    formatter: function(param) {
                        return param.data[2];
                    },
                },
            },
            itemStyle: {
                normal: {
                    color: '#e93224',
                },
            },
            data: [
                [data.newData, 0, '最新']
            ],
        }, {
            zlevel: 20,
            type: 'scatter',
            symbol: 'pin',
            symbolSize: 50,
            symbolRotate:180,
            label: {
                normal: {
                    show: true,
                    fontSize:12,
                    offset:[0, 10],
                    formatter: function(param) {
                        return param.data[2];
                    },
                },
            },
            itemStyle: {
                normal: {
                    color: '#FBB969',
                },
            },
            data: [
                [data.lastData, 0, '上月']
            ],
        })
      var option = {
        backgroundColor: '#fff',
        tooltip: {
          show: false,
        },

        grid: {
          containLabel: true,
          top: '0%',
          left: '0%',
          right: '0%',
          bottom: '0%',
        },
        xAxis: {
          show: false,
        },
        yAxis: [{
            inverse: true,
            data: ['卖'],
            axisLabel: {
              margin: 40,
              fontSize: 16,
              align: 'left',
              color: '#44962a',
              nterval: 0, //强制显示文字
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisPointer: {
              label: {
                show: true,
                margin: 30,
              },
            },
          },
          {
            show: true,
            data: ['买'],
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              margin: 40,
              fontSize: 16,
              align: 'left',
              color: '#e93224',
              nterval: 0, //强制显示文字
            },
          },
        ],
        series: series
      };
      // 3.配置项和数据给实例化对象
      myChart.setOption(option);
    })
  </script>
</body>

</html>